<template>
	<div class="left-box">
		<div class="heade-wrapper">
			<a-input-group compact>
				<business-account-list
					v-model="orgId"
					panel="Node"
					:accountId="selectAccountId"
					@change="orgIdChangeHandle"
					class="heade-left-box"
				/>
				<a-input-search
					class="heade-right-box"
					:placeholder="this.$i18n('selectPeople.input',this.$i18n('form.selectPeople.extend'))"
					v-model.trim="searchValue"
					@search="searchHandle"
				>
				</a-input-search>
			</a-input-group>
		</div>

		<div class="content-wrapper" v-if="hiddenFormFieldRole">
			<scroll-list
				panel="FormField"
				command="formFields"
				ref="list"
				:initSearchValue="listSearchCondition"
			/>
		</div>
		<top-bottom-layout class="content-wrapper" v-else>
			<template #top>
				<scroll-list
					panel="FormField"
					command="formFields"
					ref="list"
					:initSearchValue="listSearchCondition"
					:singleAndMult="true"
					:checkAllShow="false"
					iconType="cap-icon-alternative-post"
					@toCheckValueClickProp="getListValueClickPropHandle"
				/>
			</template>
			<template #middle></template>
			<template #bottom>
				<scroll-list
					panel="FormField"
					command="roleList"
					ref="roleList"
					:otherProps="roleOtherProps"
					:titleProps="roleTitleProps"
					:firstLoadSearch="roleFirstLoad"
					iconType="cap-icon-alternative-post"
				/>
			</template>
		</top-bottom-layout>
	</div>
</template>

<script>
import scrollList from '@/components/scrollList';
import topBottomLayout from '@/components/topBottomLayout';
import businessAccountList from '@/components/businessAccountList';

export default {
	name: 'FormField',
	components: {
		scrollList,
		topBottomLayout,
		businessAccountList
	},
	inject: ['app'],
	data() {
		return {
			searchValue: '',
			selectAccountId: '',
			fieldId: '',
			orgId: '',
			listSearchCondition: {},
			listOtherProps: ['name'],
			listTitleProps: {},
			roleOtherProps: [],
			roleTitleProps: {},
			roleFirstLoad: false
		};
	},
	watch: {},
	computed: {
		hiddenFormFieldRole() {
			return this.app().orgSelect.hiddenFormFieldRole;
		}
	},
	beforeMount() {
		const { defaultAccountId, extParameters } = this.app().orgSelect;
		this.selectAccountId = defaultAccountId;
		this.listSearchCondition = {
			accountId: this.selectAccountId,
			keyword: this.searchValue,
			extParameters: extParameters,
			businessAccountId: defaultAccountId
		};
	},
	mounted() {
		setTimeout(() => {
			const { defaultAccountId } = this.app().orgSelect;
			this.orgId = defaultAccountId;
		}, 300);
	},
	methods: {
		initProps() {
			this.searchValue = '';
			this.fieldId = '';
			this.roleFirstLoad = false;
		},
		onChangeAccount(ret) {
			// 单位
			this.initProps();
			if (!this.hiddenFormFieldRole) {
				this.$refs.roleList.initProps(); // 人员清空
			}
			this.selectAccountId = ret.id;
			this.searchHandle();
		},
		searchHandle() {
			const { extParameters } = this.app().orgSelect;
			this.$refs.roleList.initProps();
			this.$refs.list.search({
				accountId: this.selectAccountId,
				keyword: this.searchValue,
				extParameters: extParameters,
				businessAccountId: this.orgId
			});
		},
		orgIdChangeHandle() {
			this.initProps();
			if (!this.hiddenFormFieldRole) {
				this.$refs.roleList.initProps(); // 人员清空
			}
			this.searchHandle();
		},
		getListValueClickPropHandle(value) {
			if (!this.hiddenFormFieldRole) {
				this.fieldId = value.id;
				this.roleSearchHandle();
			}
		},
		roleSearchHandle() {
			const { extParameters } = this.app().orgSelect;
			this.roleFirstLoad = true;
			this.$refs.roleList.search({
				fieldId: this.fieldId,
				accountId: this.selectAccountId,
				extParameters: extParameters,
				businessAccountId: this.orgId
			});
		}
	}
};
</script>

<style lang="scss" scoped>
</style>
